<nz-layout class="app-layout">
  <nz-sider class="menu-sidebar"
            nzCollapsible
            nzWidth="256px"
            nzBreakpoint="md"
            [(nzCollapsed)]="isCollapsed"
            [nzTrigger]="null">

    <!-- logo区 -->
    <div class="sidebar-logo">
      <span href="https://ng.ant.design/" target="_blank">
        <img src="https://ng.ant.design/assets/img/logo.svg" alt="logo">
        <h1>Ant Design Of Angular</h1>
      </span>
    </div>

    <!-- 左侧菜单 -->
    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <li nz-submenu nzOpen nzTitle="Dashboard" nzIcon="dashboard">
        <ul>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="login">login页面</a>
          </li>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="welcome">Welcome页面333</a>
          </li>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="404"> 404</a>
          </li>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="genjimmer">genjimmer</a>
          </li>

        </ul>
      </li>
      <li nz-submenu nzOpen nzTitle="Form" nzIcon="form">
        <ul>
          <li nz-menu-item nzMatchRouter>
            <a>Basic Form</a>
          </li>
        </ul>
      </li>
    </ul>
  </nz-sider>

  <!-- 右侧布局 -->
  <nz-layout>
    <!-- 头部栏 -->
    <nz-header>
      <div class="app-header">
        <!-- 折叠按钮 s -->
        <span class="header-trigger" (click)="isCollapsed = !isCollapsed">
            <span class="trigger"
                  nz-icon
                  [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
            ></span>
        </span>
        <!-- 折叠按钮 e -->
        <span>
          <nz-space [nzAlign]="'baseline'" style="padding: 0 20px;  background-color: aquamarine;">
            <button *nzSpaceItem nz-button nzType="primary">Button</button>
            <button *nzSpaceItem nz-button nzType="default">Default</button>
            <button *nzSpaceItem nz-button nzType="dashed">Dashed</button>
            <a *nzSpaceItem nz-button nzType="link">Link</a>
          </nz-space>
         </span>

      </div>
    </nz-header>

    <!-- 内容区 -->
    <nz-content>
      <div class="inner-content">
        <!-- home路由子组件渲染标记处 -->
        <router-outlet></router-outlet>
      </div>
    </nz-content>

  </nz-layout>
</nz-layout>
